<template>
    <div class="hello">
        <div style="height: 240px">
            <table style="border: 1px solid #000;margin: 0 auto;">
                <tr v-for=" item in  showData" :key="item.name">
                    <td style="border: 1px solid #000">{{item.name}}</td>
                    <td v-for=" (items, index) in  item.data" :key="index" style="border: 1px solid #000">
                        <span>{{items}}</span>
                    </td>
                </tr>
            </table>
        </div>
        <div class="btn-list">
            <button v-on:click="up()">上一页</button>
            <button v-on:click="down()">下一页</button>
        </div>
    </div>
</template>

<script>
  import resultData from '../result'

  export default {
    name: 'HelloWorld',
    data: () => {
      return {
        showData: [],
        pageNum: 2,     // 点击一次要调整的数据
        maxPageNum: 6, // 页面内显示数据的上限

        indexNum: 0,
        maxIndex: 0,
        pageIndex: 0,
        showPageNum: 0,
        tempData: []
      }
    },
    created () {
      for (let item of resultData.data.contents) {
        item.data[1] === '-' ? item.data[1] = '999' : item.data[1];
        item.data[2] === '-' ? item.data[2] = '999' : item.data[2];

        item.active = true;
      }

      this.maxIndex = resultData.data.contents.length
      for (let i = 0; i < this.maxIndex; i += this.pageNum) {
        this.tempData.push([resultData.data.contents[i], resultData.data.contents[i + 1]])
      }
      this.maxIndex = this.tempData.length
      this.pushData()
    },
    methods: {
      dataLength (data) {
        return data.length >= this.maxPageNum
      },
      pushData () {
        if (this.showPageNum === this.maxPageNum / this.pageNum) {
          this.pageIndex++
          this.showPageNum = 0
        }
        this.showPageNum++
        this.showData = this.showData.concat(this.tempData[this.indexNum])
      },
      popData () {
        if (this.pageIndex === 0) {
          return
        }
        if (this.showPageNum > 0) {
          this.showPageNum--
        }
        if (this.pageIndex >= 1 && this.showPageNum === 0) {
          this.pageIndex--
          this.showPageNum = this.maxPageNum / this.pageNum
        }
        this.showData.splice(this.showData.length - this.pageNum, this.pageNum)
      },
      shiftData () {
        this.showData.splice(0, this.pageNum)
      },
      unshiftData () {
        this.showData = this.tempData[this.indexNum + 1 - (this.maxPageNum / this.pageNum)].concat(this.showData)
        this.popData()
      },
      down () {
        if (this.indexNum >= this.maxIndex - 1) {
          return
        }
        if (this.dataLength(this.showData)) {
          this.shiftData()
          this.indexNum++
          this.pushData()
        } else {
          this.indexNum++
          this.pushData()
        }
      },
      up () {
        if (this.pageIndex === 0) {
          return
        }
        if (this.indexNum > 0) {
          if (this.dataLength(this.showData)) {
            this.indexNum--
            this.unshiftData()
          } else {
            if (this.pageIndex !== 0) {
              this.indexNum--
              this.popData()
            }
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .btn-list {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    td {
        width: 100px;
        height: 30px;
    }
    button{
        width: 120px;
        height: 40px;
        background: #66ccff;
        border: 0;
    }
</style>
